<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="box">
        <p>1</p>
        <h2>22</h2>
    </div>


    <script>

        // 事件 ：事情发生并得到处理
        // 事件三要素  事件源 + 事件类型 + 事件处理函数

        // 事件对象 ： 记录事情发生的经过   事件处理函数的 第一个参数  e

        // 目标对象  e.target   --- 事件最具体的触发元素

        // 事件绑定方式
        //     DOM0级事件    行内方式   onclick = function      事件会发生覆盖
        //     DOM2级事件    事件监听   addEventListener(type , cb , bool(是否支持事件捕获，默认不支持))

        // 事件流
        //    捕获流   --- 从外向内
        //    冒泡流   --- 从内向外
        //    默认浏览器都支持事件冒泡，事件监听的第三个参数来测试事件捕获

        // 事件冒泡
        //    概念：子元素的事件会触发父元素的同类型事件
        //    如何阻止事件冒泡  e.stopPropagation()

        // 阻止默认事件
        //    复制粘贴右键等都属于默认事件
        //    e.preventDefault()
        //    return false
        //    css属性  user-select:none  禁止选中

        //  事件委托
        //     基于事件冒泡 -> 子元素的事件会触发父元素的事件   把所有子元素的事件委托给父元素来做
        //     优势：减少事件处理函数，可以给未来的对象添加事件


        // 事件类型
        //    鼠标事件
        //    键盘事件
        //    表单事件  -- 不要form
        //    其他事件  -- 复制粘贴右键。。。

    </script>
    
</body>
</html>